@import 'styles/variables'

$color-typo-primary: $black
$color-typo-secondary: $grey-2
$color-typo-grey-light: $grey-1

.places__table
  padding-block: 35px 15px
  padding-inline: 80px 20px
  display: flex
  gap: 20px
  flex: 1

  &_column
    display: flex
    flex-direction: column
    gap: 20px
    flex: 1 1

  &_cell_header
    font-size: 1.125rem
    color: $color-typo-secondary

  &_quantity
    color: black
    margin-left: 0.25em

  &_cell_seat-type
    font-size: 1.5rem
    color: $color-typo-primary

    .places__table_quantity
      font-weight: 700

  &_cell_price
    font-weight: 700
    font-size: 1.5rem
    color: $color-typo-primary

  &_currency
    font-weight: 400
    color: $color-typo-secondary
    margin-left: 0.25em

  &_cell_features
    display: flex
    gap: 12px
    align-items: center

    height: 1.5rem

  &_fpc
    margin-left: 0.25em
    color: $color-typo-grey-light

  &_feature
    position: relative

    display: flex
    justify-content: center
    align-items: center

    width: 36px
    height: 34px
    padding: 8px
    border: 1px solid #292929
    border-radius: 5px

    cursor: pointer
    transition: 0.1s

    &:hover
      background: #FFA800

      & > .places__table_feature_title
        visibility: visible

    &:not(:hover)
      &.selected
        background: #ffbb36
        border-color: #ffbb36

        & > .places__table_feature_icon
          fill: #F4F2F6

      &.included
        background: #FCDC9D
        border-color: #FCDC9D

        & > .places__table_feature_icon
          fill: #928F94

    &_icon
      fill: #292929

    &_title
      visibility: hidden
      position: absolute
      white-space: nowrap
      background: #E5E5E5
      border-radius: 5px
      padding: 8px 15px
      top: 40px
      pointer-events: none
      box-shadow: 0px 4px 4px rgb(0 0 0 / 25%)

      &::before
        content: ''
        position: absolute
        border-right: 4px solid transparent
        border-bottom: 4px solid #E5E5E5
        border-left: 4px solid transparent
        top: -4px
        left: calc(50% - 4px)
